<template>
  <div>
    <el-container
      class="main-el-contarner"
      v-loading="indexloading"
      element-loading-text="功能在开放中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.6)"
    >
      <el-main>
        <div class="kanbao-bigbox">
          <div>
            <el-row :gutter="10">
              <el-col :span="8">
                <div class="whitebg-content-1">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span class="lm-title"
                        ><i
                          class="el-icon-s-marketing"
                          style="font-size: 20px; vertical-align: middle"
                        ></i>
                        今日消息</span
                      >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                      >
                        <div style="margin-top: -8px">
                          <el-radio-group
                            v-model="dateValue1"
                            size="mini"
                            fill="#0BB976"
                            text-color="#FFFFFF"
                            border="true"
                            @change="changeDateType(1)"
                          >
                            <el-radio-button label="yestoday" name="yestoday"
                              >昨日</el-radio-button
                            >
                            <el-radio-button label="today" name="today"
                              >今日</el-radio-button
                            >
                            <el-radio-button label="last7day" name="last7day"
                              >近7天</el-radio-button
                            >
                          </el-radio-group>
                        </div>
                      </el-button>
                    </div>
                    <div
                      class="text item today-box"
                      v-loading="loadingdata1"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255,255,255, 0.8)"
                      element-loading-text="数据装载中"
                    >
                      <div class="qushiboxa">
                        <div class="xiaoxi-lanmu">
                          <el-row :gutter="20">
                            <el-col :span="10" :offset="3">
                              <div class="xiaoxi-text">
                                <i
                                  class="el-icon-bell"
                                  style="
                                    color: #333333;
                                    font-size: 24px;
                                    vertical-align: middle;
                                  "
                                ></i>
                                子系统事件总数：
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="xiaoxi-nums">
                                {{ msg_event_recordscount }}
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="xiaoxi-lanmu">
                          <el-row :gutter="20">
                            <el-col :span="10" :offset="3">
                              <div class="xiaoxi-text">
                                <i
                                  class="el-icon-orange"
                                  style="
                                    color: #333333;
                                    font-size: 24px;
                                    vertical-align: middle;
                                  "
                                ></i>
                                告警消息推送总数：
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="xiaoxi-nums">
                                {{ msg_alarms_recordscount }}
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="xiaoxi-lanmu">
                          <el-row :gutter="20">
                            <el-col :span="10" :offset="3">
                              <div class="xiaoxi-text">
                                <i
                                  class="el-icon-view"
                                  style="
                                    color: #333333;
                                    font-size: 24px;
                                    vertical-align: middle;
                                  "
                                ></i>
                                通知记录总数：
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="xiaoxi-nums">
                                {{ msg_inform_recordscount }}
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div class="xiaoxi-lanmu">
                          <el-row :gutter="20">
                            <el-col :span="10" :offset="3">
                              <div class="xiaoxi-text">
                                <i
                                  class="el-icon-alarm-clock"
                                  style="
                                    color: #333333;
                                    font-size: 24px;
                                    vertical-align: middle;
                                  "
                                ></i>
                                联动控制记录总数：
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="xiaoxi-nums">
                                {{ msg_control_recordscount }}
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="whitebg-content-1">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span class="lm-title"
                        ><i
                          class="el-icon-s-marketing"
                          style="font-size: 20px; vertical-align: middle"
                        ></i>
                        告警等级统计</span
                      >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                      >
                        <el-dropdown @command="handleCommand1">
                          <span class="el-dropdown-link">
                            {{ dengjiTextTitle
                            }}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled
                              >告警等级占比时间</el-dropdown-item
                            >
                            <el-dropdown-item command="1" divided
                              >近1周</el-dropdown-item
                            >
                            <el-dropdown-item command="2"
                              >近1个月</el-dropdown-item
                            >
                            <el-dropdown-item command="3"
                              >近3个月</el-dropdown-item
                            >
                            <el-dropdown-item command="4"
                              >近6个月</el-dropdown-item
                            >
                            <el-dropdown-item command="5"
                              >近12个月</el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-button>
                    </div>
                    <div
                      class="text item today-box"
                      v-loading="loadingdata2"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255,255,255, 0.8)"
                      element-loading-text="数据装载中"
                    >
                      <div ref="echartsboxb" class="qushiboxb">
                        告警数量趋势
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="whitebg-content-1">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span class="lm-title"
                        ><i
                          class="el-icon-s-marketing"
                          style="font-size: 20px; vertical-align: middle"
                        ></i>
                        告警类型排行(TOP5)</span
                      >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                      >
                        <el-dropdown @command="handleCommand2">
                          <span class="el-dropdown-link">
                            {{ leixingTextTitle
                            }}<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item disabled
                              >告警类型比对时间</el-dropdown-item
                            >
                            <el-dropdown-item command="1" divided
                              >近1周</el-dropdown-item
                            >
                            <el-dropdown-item command="2"
                              >近1个月</el-dropdown-item
                            >
                            <el-dropdown-item command="3"
                              >近3个月</el-dropdown-item
                            >
                            <el-dropdown-item command="4"
                              >近6个月</el-dropdown-item
                            >
                            <el-dropdown-item command="5"
                              >近12个月</el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </el-dropdown>
                      </el-button>
                    </div>
                    <div
                      class="text item today-box"
                      v-loading="loadingdata3"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255,255,255, 0.8)"
                      element-loading-text="数据装载中"
                    >
                      <div class="qushiboxc">
                        <div
                          class="paihang-lanmu"
                          v-for="(item, i) in progressdata"
                          :key="i"
                        >
                          <el-row :gutter="20">
                            <el-col :span="6">
                              <div class="ph-text">
                                <i
                                  class="el-icon-s-help"
                                  :style="{
                                    color:
                                      item.alarm_type == 1
                                        ? '#ff0000'
                                        : item.alarm_type == 2
                                        ? '#ff9933'
                                        : item.alarm_type == 3
                                        ? '#ff9933'
                                        : item.alarm_type == 4
                                        ? '#66cccc'
                                        : '#66cccc',
                                  }"
                                ></i
                                >{{
                                  item.alarm_type == 1
                                    ? '故障告警'
                                    : item.alarm_type == 2
                                    ? '离线告警'
                                    : item.alarm_type == 3
                                    ? '消防告警'
                                    : item.alarm_type == 4
                                    ? '周界告警'
                                    : '周位告警'
                                }}
                              </div>
                            </el-col>
                            <el-col :span="12"
                              ><el-progress
                                :show-text="true"
                                :text-inside="true"
                                :stroke-width="18"
                                :percentage="
                                  parseFloat(
                                    (
                                      (item.countSum / armTypetotal) *
                                      100
                                    ).toFixed(2)
                                  )
                                "
                                :color="
                                  item.alarm_type == 1
                                    ? '#ff0000'
                                    : item.alarm_type == 2
                                    ? '#ff9933'
                                    : item.alarm_type == 3
                                    ? '#ff9933'
                                    : item.alarm_type == 4
                                    ? '#66cccc'
                                    : '#66cccc'
                                "
                              ></el-progress
                            ></el-col>
                            <el-col :span="6">{{ item.countSum }}</el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="dakanban-box">
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="whitebg-content-1">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span class="lm-title"
                        ><i
                          class="el-icon-s-marketing"
                          style="font-size: 20px; vertical-align: middle"
                        ></i>
                        子系统消息趋势</span
                      >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                      >
                        <div style="margin-top: -8px">
                          <el-radio-group
                            v-model="dateValue2"
                            size="mini"
                            fill="#0BB976"
                            text-color="#FFFFFF"
                            border="true"
                            @change="changeDateType(2)"
                          >
                            <el-radio-button label="today" name="today"
                              >今日</el-radio-button
                            >
                            <el-radio-button label="month" name="month"
                              >本月</el-radio-button
                            >
                            <el-radio-button label="year" name="year"
                              >本年</el-radio-button
                            >
                          </el-radio-group>
                        </div>
                      </el-button>
                    </div>
                    <div
                      class="text item today-box"
                      v-loading="loadingdata4"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255,255,255, 0.8)"
                      element-loading-text="数据装载中"
                    >
                      <div ref="echartsboxd" class="qushiboxd">
                        子系统消息趋势
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="whitebg-content-1">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span class="lm-title"
                        ><i
                          class="el-icon-s-marketing"
                          style="font-size: 20px; vertical-align: middle"
                        ></i>
                        告警数量趋势</span
                      >
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                      >
                        <div style="margin-top: -8px">
                          <el-radio-group
                            v-model="dateValue3"
                            size="mini"
                            fill="#0BB976"
                            text-color="#FFFFFF"
                            border="true"
                            @change="changeDateType(3)"
                          >
                            <el-radio-button label="today" name="today"
                              >今日</el-radio-button
                            >
                            <el-radio-button label="month" name="month"
                              >本月</el-radio-button
                            >
                            <el-radio-button label="year" name="year"
                              >本年</el-radio-button
                            >
                          </el-radio-group>
                        </div>
                      </el-button>
                    </div>
                    <div
                      class="text item today-box"
                      v-loading="loadingdata5"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(255,255,255, 0.8)"
                      element-loading-text="数据装载中"
                    >
                      <div ref="echartsboxe" class="qushiboxe">
                        告警数量趋势
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from '@/views/inc/SideHeader'
import Navlanmu from '@/views/inc/Navlanmu'
import LeftMenuMessage from '@/views/inc/LeftMenuMessage'
import { getDateTimes, numFormat, getDateWeek } from '@/utils/index.js'
import {
  getrecord,
  getregister,
  getalarmType,
  getbroken,
} from '@/api/message/list'

export default {
  name: 'statistics',
  components: { SideHeader, Navlanmu, LeftMenuMessage },
  data() {
    return {
      indexloading: false,
      loadingdata1: false,
      loadingdata2: false,
      loadingdata3: false,
      loadingdata4: false,
      loadingdata5: false,
      isloading: false,
      tableData: [],
      msg_alarms_recordscount: '',
      msg_control_recordscount: '',
      msg_inform_recordscount: '',
      msg_event_recordscount: '',
      commandid: '1',
      commandid2: '1',
      registertotal: '',
      armTypetotal: '',
      progressdata: '',
      dateValue1: 'today',
      dateValue2: 'today',
      dateValue3: 'today',
      dengjiTextTitle: '近1周',
      leixingTextTitle: '近1周',
      gaojingNums: 1,
      gaojingZhanbiData: [],
      gaojingBox1Data: [],
      sysDataPack: {
        textName: '',
        textValue: '',
      },
      // alarmQtyPack:{
      //   textName:["0时","01时","02时","03时","04时","05时","06时","07时","08时","09时","10时","11时","12时","13时","14时","15时","16时","17时","18时","19时","20时","21时","22时","23时"],
      //   textValue:[3445,678,78,888,123,234,345,456,567,678,678,876,765,654,543,544,432,456,567,111,12,100,60,20]
      //   },
      alarmQtyPack: {
        textName: '',
        textValue: '',
      },
    }
  },
  mounted() {
    this.getregister()
    this.getalarmType()
    this.getrecord()
    this.getbroken2()
    this.getbroken()
    //this.kanbanbox3();
    this.kanbanbox4()
    this.kanbanbox5()
  },
  created() {
    this.isloading = false
  },
  methods: {
    nodeClick(type, data) {
      this.loadingdata1 = true
      console.log('nodeClick', type, data)
      this.searchForm = data
      this.getEnergyQushi()
      this.getEnergyDeptRanking()
      this.getEnergylevelCount()
    },
    //下拉选择请求
    handleCommand1(command) {
      //this.$message('click on item ' + command);
      if (command == 1) {
        this.dengjiTextTitle = '近1周'
      }
      if (command == 2) {
        this.dengjiTextTitle = '近1个月'
      }
      if (command == 3) {
        this.dengjiTextTitle = '近3个月'
      }
      if (command == 4) {
        this.dengjiTextTitle = '近6个月'
      }
      if (command == 5) {
        this.dengjiTextTitle = '近12个月'
      }
      this.commandid = command
      this.getregister()
      this.loadingdata2 = true
      // var that=this;
      //  setTimeout(() => {
      //       that.loadingdata2=false;
      //  },1000);
    },
    //下拉选择请求
    handleCommand2(command) {
      //this.$message('click on item ' + command);
      if (command == 1) {
        this.leixingTextTitle = '近1周'
      }
      if (command == 2) {
        this.leixingTextTitle = '近1个月'
      }
      if (command == 3) {
        this.leixingTextTitle = '近3个月'
      }
      if (command == 4) {
        this.leixingTextTitle = '近6个月'
      }
      if (command == 5) {
        this.leixingTextTitle = '近12个月'
      }
      this.commandid2 = command
      this.loadingdata3 = true
      this.getalarmType()
      // var that=this;
      //  setTimeout(() => {
      //       that.loadingdata3=false;
      //  },1000);
    },
    //切换状态：今日、本月
    changeDateType(tid) {
      if (tid == 1) {
        this.loadingdata1 = true
        this.getrecord()
      }
      if (tid == 2) {
        this.loadingdata4 = true
        this.getbroken2()
      }
      if (tid == 3) {
        this.loadingdata5 = true
        this.getbroken()
      }
      //  var that=this;
      //  setTimeout(() => {
      //       that.loadingdata1=false;
      //       that.loadingdata4=false;
      //       that.loadingdata5=false;
      //  },1000);
    },
    //查询告警类型排行(TOP5)
    getalarmType() {
      let fromData = {}
      fromData = getDateTimes(this.commandid2)
      fromData.funId = 'msg_inform_template'

      getalarmType(fromData).then((res) => {
        this.loadingdata3 = false
        if (res.status == '200') {
          let resData = res.data
          this.progressdata = resData
          let total = 0
          for (let i = 0; i < resData.length; i++) {
            total += resData[i].countSum
          }
          this.armTypetotal = total
          // console.log('this.armTypetotal',this.armTypetotal)
        }
      })
    },
    //查询告警等级统计
    getregister() {
      let fromData = {}
      fromData = getDateTimes(this.commandid)
      fromData.funId = 'msg_inform_template'
      getregister(fromData).then((res) => {
        this.loadingdata2 = false
        if (res.status == 200) {
          let resData = res.data
          let informtemplate = resData.map((item) => {
            let name = ''
            if (item.alarm_level == '1') {
              name = '一般'
            } else if (item.alarm_level == '2') {
              name = '较重'
            } else if (item.alarm_level == '3') {
              name = '严重'
            }
            return { name: name, value: item.countSum }
          })
          //获取数量总和
          let total = 0
          for (let i in resData) {
            total += resData[i].countSum
          }
          this.registertotal = total
          this.gaojingZhanbiData = informtemplate
        }
        this.kanbanbox2()
      })
    },
    //告警数量趋势
    getrecord() {
      let fromData = {}
      fromData = getDateTimes(this.dateValue1)
      fromData.funId = 'msg_inform_template'

      getrecord(fromData).then((res) => {
        if (res.status == '200') {
          this.loadingdata1 = false
          var resData = res.data
          this.msg_alarms_recordscount = resData[0].msg_alarms_recordscount
          this.msg_control_recordscount = resData[1].msg_control_recordscount
          this.msg_inform_recordscount = resData[2].msg_inform_recordscount
          this.msg_event_recordscount = resData[3].msg_event_recordscount
        }
      })
    },
    //查询子系统消息趋势
    getbroken() {
      let fromData = {}
      fromData = getDateTimes(this.dateValue3)
      fromData.funId = 'msg_alarm_records'
      if (this.dateValue3 == 'today') {
        fromData.dateType = 'H'
      } else if (this.dateValue3 == 'month') {
        fromData.dateType = 'D'
      } else if (this.dateValue3 == 'year') {
        fromData.dateType = 'Y'
      }
      // console.log('fromData',fromData)
      getbroken(fromData).then((res) => {
        this.loadingdata4 = false
        this.loadingdata5 = false
        // console.log('res',res)
        if (res.status == '200') {
          let resdata = res.data
          let sysDataPackHOUR = resdata.map((item) => {
            let name = ''
            if (this.dateValue3 == 'today') {
              name = item.HOUR
            } else if (this.dateValue3 == 'month') {
              name = item.days
            } else if (this.dateValue3 == 'year') {
              name = item.month
            }
            return name
          })
          let sysDataPacknum = resdata.map((item) => {
            return item.num
          })
          this.alarmQtyPack.textName = sysDataPackHOUR
          this.alarmQtyPack.textValue = sysDataPacknum
          // console.log('this.alarmQtyPack',this.alarmQtyPack)
          this.kanbanbox5()
        }
      })
    },
    //查询子系统消息趋势
    getbroken2() {
      let fromData = {}
      fromData = getDateTimes(this.dateValue2)
      fromData.funId = 'msg_event_records'
      if (this.dateValue2 == 'today') {
        fromData.dateType = 'H'
      } else if (this.dateValue2 == 'month') {
        fromData.dateType = 'D'
      } else if (this.dateValue2 == 'year') {
        fromData.dateType = 'Y'
      }
      // console.log('fromData',fromData)
      getbroken(fromData).then((res) => {
        this.loadingdata4 = false
        // console.log('res',res)
        if (res.status == '200') {
          let resdata = res.data
          let sysDataPackHOUR = resdata.map((item) => {
            let name = ''
            if (this.dateValue2 == 'today') {
              name = item.HOUR
            } else if (this.dateValue2 == 'month') {
              name = item.days
            } else if (this.dateValue2 == 'year') {
              name = item.month
            }
            return name
          })
          let sysDataPacknum = resdata.map((item) => {
            return item.num
          })
          this.sysDataPack.textName = sysDataPackHOUR
          this.sysDataPack.textValue = sysDataPacknum
          // console.log('this.sysDataPack',this.sysDataPack)
          this.kanbanbox4()
        }
      })
    },
    //[告警等级统计Echarts]
    kanbanbox2() {
      var echartsboxb = this.$refs.echartsboxb
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echartsboxb)
      if (myChart == null) {
        myChart = this.$echarts.init(echartsboxb)
      }

      var option
      option = {
        title: {
          text: '告警总数',
          textStyle: {
            fontSize: 14,
          },
          subtext: numFormat(parseInt(this.registertotal)) + '个',
          subtextStyle: {
            color: '#999999',
          },
          textAlign: 'center',
          left: '48%',
          top: '45%',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: '0%',
          top: '0%',
          bottom: 20,
          orient: 'vertical',
          x: 'left',
          /*formatter: function(name) {
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++) {
                  total += data[i].value;
                  if (data[i].name == name) {
                    tarValue = data[i].value;
                  }
                }
                var v = tarValue;
                return `${name}  ${v}元`;
                var p = Math.round(((tarValue / total) * 100));
                return `${name}  ${v}人(${p}%)`;
              },*/
        },
        series: [
          {
            name: '告警等级占比',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['50%', '50%'],
            roseType: 'area',
            data: this.gaojingZhanbiData,
            label: {
              formatter: function (data) {
                //显示数量、百分比
                return `${data.name} (${data.value}个)(${data.percent.toFixed(
                  1
                )}%)`
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    //["今年用能"，"去年用能"]
    kanbanbox3() {
      var that = this
      var echartsboxc = this.$refs.echartsboxc
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echartsboxc)
      if (myChart == null) {
        myChart = this.$echarts.init(echartsboxc)
      }
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        dataset: {
          source: that.gaojingBox1Data,
        },
        grid: { containLabel: true },
        xAxis: {
          name: 'kWh',
          min: 0,
          axisLabel: {
            formatter: function (value, index) {
              if (value > 10000) {
                return value / 10000 + '万'
              }
              return value + ''
            },
          },
        },
        yAxis: {
          type: 'category',
        },
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 10,
          max: 100,
          text: ['告警高', '告警低'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F'],
          },
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product',
            },
          },
        ],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    //子系统消息趋势Echarts
    kanbanbox4() {
      // console.log('this.sysDataPack',this.sysDataPack)
      // var that=this;
      var echartsboxd = this.$refs.echartsboxd
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echartsboxd)
      if (myChart == null) {
        myChart = this.$echarts.init(echartsboxd)
      }
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.sysDataPack.textName,
        },
        yAxis: {
          type: 'value',
          min: 0,
          axisLabel: {
            formatter: function (value, index) {
              if (value > 10000) {
                return value / 10000 + '万'
              }
              return value + ''
            },
          },
        },
        grid: {
          show: true,
          borderColor: '#F1F1F1',
          x: 70,
          x2: 50,
          y: 40,
          y2: 30,
        },
        series: [
          {
            data: this.sysDataPack.textValue,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: 'rgba(80,135,236,0.3)',
            },
          },
        ],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    //告警数量趋势Echarts
    kanbanbox5() {
      var that = this
      var echartsboxe = this.$refs.echartsboxe
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echartsboxe)
      if (myChart == null) {
        myChart = this.$echarts.init(echartsboxe)
      }
      var option

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          top: 'top',
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',

          data: that.alarmQtyPack.textName,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '30%'],
          min: 0,
          axisLabel: {
            formatter: function (value, index) {
              if (value > 10000) {
                return value / 10000 + '万'
              }
              return value + ''
            },
          },
        },
        grid: {
          show: true,
          borderColor: '#F1F1F1',
          x: 70,
          x2: 10,
          y: 40,
          y2: 30,
        },
        series: [
          {
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' kWh'
              },
            },
            smooth: 0.6,
            showSymbol: true,
            legendHoverLink: true,
            lineStyle: {
              color: '#EC6250',
              width: 2,
            },
            areaStyle: {
              color: 'rgba(236,98,80,0.3)',
            },
            barWidth: 20, //柱状宽度
            itemStyle: {
              //柱状默认颜色和圆角
              color: '#EC6250',
              borderRadius: [10, 10, 0, 0], // （顺时针左上，右上，右下，左下）
            },
            data: that.alarmQtyPack.textValue,
          },
        ],
      }

      option && myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
  },
}
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px 10px 0px 10px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.today-box {
  padding: 20px;
}

.dakanban-box {
  margin-top: 10px;
}

.qushiboxa {
  width: 100%;
  height: 250px;
  font-size: 14px;
}

.qushiboxb {
  width: 100%;
  height: 250px;
}

.qushiboxc {
  width: 100%;
  height: 250px;
  font-size: 14px;
}

.qushiboxd {
  width: 100%;
  height: 400px;
}

.qushiboxe {
  width: 100%;
  height: 400px;
}

.paihang-lanmu {
  padding: 15px 0px 15px 0px;
}

.ph-text {
  text-align: right;
}

.xiaoxi-lanmu {
  padding: 18px 0px 18px 0px;
}

.xiaoxi-nums {
  font-size: 20px;
  color: #0282bb;
  cursor: pointer;
}
</style>
